<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通用模版</title>
  <script src="../css/tailwind3.4.17.css"></script>
  <link href="../css/all.min.css" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#10B981',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .phone-shadow {
        box-shadow: 0 0 0 16px #111, 0 0 0 17px #1d1d1d, 0 0 0 21px #1f1f1f, 
                    0 0 0 22px #2f2f2f, 0 4px 30px rgba(0, 0, 0, 0.5);
      }
      .editor-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .code-item-hover {
        @apply hover:bg-primary/5 transition-colors cursor-pointer;
      }
      .btn-cursor {
        @apply cursor-pointer;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen">
  <main class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <div class="editor-container">
        <div class="mb-4 flex justify-between items-center">
          <div></div>
          <div class="flex space-x-2"></div>
        </div>
        
        <div class="editor-shadow rounded-xl overflow-hidden">
          <div class="bg-gray-100 px-4 py-2 border-b border-gray-200 flex flex-col sm:flex-row sm:items-center justify-between space-y-2 sm:space-y-0">
            <div class="flex items-center space-x-3">
              <div class="w-3 h-3 rounded-full bg-red-400"></div>
              <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
              <div class="w-3 h-3 rounded-full bg-green-400"></div>
            </div>
            <div class="relative w-full sm:w-64">
              <input 
                id="code-search-input" 
                type="text" 
                placeholder="搜索模版名称..." 
                class="w-full px-3 py-1.5 text-sm rounded border border-gray-300 focus:outline-none focus:ring-1 focus:ring-primary"
              >
              <i class="fa fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 btn-cursor"></i>
            </div>
          </div>
          
          <div class="w-full h-[445px] bg-white overflow-y-auto">
            <div id="no-result" class="hidden w-full h-full flex items-center justify-center text-gray-500">
              <i class="fa fa-search-minus mr-2"></i> 未找到匹配的模版
            </div>
            <ul id="code-list" class="p-4 space-y-2"></ul>
          </div>
        </div>
        
        <div class="mt-4 p-3 bg-white rounded-lg border border-gray-200">
          <h3 class="text-sm font-medium text-gray-700 mb-2 flex items-center">
            <i class="fa fa-info-circle text-primary mr-1 btn-cursor"></i> 当前选中
          </h3>
          <p id="current-code-name" class="text-sm text-gray-600">未选择任何模版</p>
          <div id="current-code-preview" class="mt-2 text-xs text-gray-500 max-h-20 overflow-hidden">
            选中模版后将显示预览内容...
          </div>
        </div>
      </div>
      
      <div class="preview-container flex flex-col items-center justify-center">
        <div class="mb-6 self-start"></div>
        
        <div class="relative phone-shadow rounded-[36px] w-[380px] h-[660px] bg-white overflow-hidden transition-all duration-300">
          <div class="absolute top-0 left-0 right-0 h-14 bg-gray-50 flex items-center justify-center">
            <div class="w-24 h-6 bg-gray-800 rounded-b-full"></div>
          </div>
          
          <div id="preview-frame" class="absolute top-14 left-0 right-0 bottom-14 overflow-auto bg-white">
            <div class="w-full h-full flex flex-col items-center justify-center p-4 text-center">
              <i class="fa fa-list-alt text-5xl text-gray-300 mb-4"></i>
              <p class="text-gray-500">请在左侧选择模版，这里将显示预览效果</p>
            </div>
          </div>
          
          <div class="absolute bottom-0 left-0 right-0 h-14 bg-gray-50 flex items-center justify-center">
            <div class="w-16 h-16 rounded-full border-2 border-gray-300 flex items-center justify-center btn-cursor">
              <div class="w-12 h-12 rounded-full bg-gray-200"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  
  <div class="fixed right-4 top-1/2 transform -translate-y-1/2 z-40 flex flex-col space-y-4 max-w-[100px]">
    <div class="flex flex-col space-y-2">
      <button id="theme-toggle" class="px-3 py-2 rounded-md border border-gray-300 text-sm hover:bg-gray-100 transition-colors shadow-sm btn-cursor">
        切换主题
      </button>
      <button id="copy-styles-btn" class="px-3 py-2 rounded-md border border-gray-300 text-sm hover:bg-gray-100 transition-colors shadow-sm btn-cursor">
        复制样式
      </button>
      <button class="phone-option px-3 py-2 rounded-md border border-gray-300 text-sm hover:bg-gray-100 transition-colors active btn-cursor" data-width="380" data-height="660">
        普通手机
      </button>
      <button class="phone-option px-3 py-2 rounded-md border border-gray-300 text-sm hover:bg-gray-100 transition-colors btn-cursor" data-width="420" data-height="660">
        大屏手机
      </button>
      <button class="phone-option px-3 py-2 rounded-md border border-gray-300 text-sm hover:bg-gray-100 transition-colors btn-cursor" data-width="300" data-height="520">
        小屏手机
      </button>
    </div>
  </div>
  
  <footer class="bg-white mt-12 py-6 border-t border-gray-200">
    <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
      <p></p>
    </div>
  </footer>
  
  <div id="notification" class="fixed bottom-6 right-6 px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center space-x-2 z-50">
    <i id="notification-icon" class="fa fa-check-circle text-green-500"></i>
    <span id="notification-text">操作成功</span>
  </div>

  <script src="../json/commonly.json"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const preStoredCodes = anotherMHtml;

      const codeSearchInput = document.getElementById('code-search-input');
      const codeList = document.getElementById('code-list');
      const noResult = document.getElementById('no-result');
      const currentCodeName = document.getElementById('current-code-name');
      const currentCodePreview = document.getElementById('current-code-preview');
      const previewFrame = document.getElementById('preview-frame');
      const themeToggle = document.getElementById('theme-toggle');
      const notification = document.getElementById('notification');
      const notificationText = document.getElementById('notification-text');
      const notificationIcon = document.getElementById('notification-icon');
      const phoneOptions = document.querySelectorAll('.phone-option');
      const phoneFrame = document.querySelector('.phone-shadow');
      const copyStylesBtn = document.getElementById('copy-styles-btn');
      
      let isDarkMode = false;
      let selectedCode = null;

      function renderCodeList(searchKey = '') {
        const filteredCodes = preStoredCodes.filter(code => 
          code.name.toLowerCase().includes(searchKey.toLowerCase())
        );
        
        if (filteredCodes.length === 0) {
          noResult.classList.remove('hidden');
          codeList.innerHTML = '';
          return;
        } else {
          noResult.classList.add('hidden');
        }
        
        let listHtml = '';
        filteredCodes.forEach((code, index) => {
          const isSelected = selectedCode && selectedCode.name === code.name;
          
          listHtml += `
            <li class="p-3 rounded-md border ${isSelected ? 'border-primary bg-primary/5' : 'border-gray-200'} code-item-hover" 
                data-index="${index}">
              <div class="flex justify-between items-start">
                <span class="font-medium text-sm ${isSelected ? 'text-primary' : ''}">${code.name}</span>
                ${isSelected ? '<i class="fa fa-check text-primary text-sm"></i>' : ''}
              </div>
              <p class="mt-1 text-xs text-gray-500 line-clamp-2">
                ${code.codeHtml.replace(/<[^>]+>/g, '').slice(0, 50)}...
              </p>
            </li>
          `;
        });
        
        codeList.innerHTML = listHtml;
        
        document.querySelectorAll('#code-list li').forEach(item => {
          item.addEventListener('click', () => {
            const index = parseInt(item.getAttribute('data-index'));
            selectCode(filteredCodes[index]);
          });
        });
      }

      function selectCode(code) {
        if (!code) return;
        
        selectedCode = code;
        renderCodeList(codeSearchInput.value);
        
        currentCodeName.textContent = `模版名称：${code.name}`;
        const plainText = code.codeHtml.replace(/<[^>]+>/g, '');
        currentCodePreview.textContent = plainText.length > 100 
          ? `${plainText.slice(0, 100)}...` 
          : plainText;
        
        updatePreview();
        showNotification(`已选中：${code.name}`);
      }

      function updatePreview() {
        if (!selectedCode) {
          previewFrame.innerHTML = `
            <div class="w-full h-full flex flex-col items-center justify-center p-4 text-center">
              <i class="fa fa-list-alt text-5xl text-gray-300 mb-4"></i>
              <p class="text-gray-500">请在左侧选择模版，这里将显示预览效果</p>
            </div>
          `;
          return;
        }
        
        previewFrame.innerHTML = selectedCode.codeHtml;
        
        const style = document.createElement('style');
        style.textContent = `
          * { box-sizing: border-box; margin: 0; padding: 0; }
          body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
          @media (max-width: 480px) {
            html { font-size: 14px; }
          }
        `;
        if (!previewFrame.querySelector('style')) {
          previewFrame.appendChild(style);
        }
        
        showNotification('预览已更新');
      }

      function showNotification(message, isSuccess = true) {
        notificationText.textContent = message;
        notificationIcon.className = isSuccess 
          ? 'fa fa-check-circle text-green-500' 
          : 'fa fa-exclamation-circle text-red-500';
        notification.classList.remove('translate-y-20', 'opacity-0');
        notification.classList.add(
          'translate-y-0', 
          'opacity-100', 
          isSuccess ? 'bg-green-50' : 'bg-red-50'
        );
        
        setTimeout(() => {
          notification.classList.remove('translate-y-0', 'opacity-100');
          notification.classList.add('translate-y-20', 'opacity-0');
        }, 3000);
      }

      function toggleTheme() {
        isDarkMode = !isDarkMode;
        
        document.body.classList.toggle('bg-gray-900', isDarkMode);
        document.body.classList.toggle('bg-gray-50', !isDarkMode);
        document.body.classList.toggle('text-white', isDarkMode);
        document.body.classList.toggle('text-dark', !isDarkMode);
        
        const codeListContainer = document.querySelector('#code-list').parentElement;
        codeListContainer.classList.toggle('bg-gray-800', isDarkMode);
        codeListContainer.classList.toggle('bg-white', !isDarkMode);
        
        const searchInput = document.getElementById('code-search-input');
        searchInput.classList.toggle('bg-gray-700', isDarkMode);
        searchInput.classList.toggle('bg-white', !isDarkMode);
        searchInput.classList.toggle('text-white', isDarkMode);
        searchInput.classList.toggle('text-gray-800', !isDarkMode);
        searchInput.classList.toggle('border-gray-600', isDarkMode);
        searchInput.classList.toggle('border-gray-300', !isDarkMode);
        
        const codeListItems = document.querySelectorAll('#code-list li');
        codeListItems.forEach(item => {
          item.classList.toggle('border-gray-700', isDarkMode);
          item.classList.toggle('border-gray-200', !isDarkMode);
          item.querySelector('p').classList.toggle('text-gray-400', isDarkMode);
          item.querySelector('p').classList.toggle('text-gray-500', !isDarkMode);
        });
        
        const currentCodeCard = document.querySelector('#current-code-name').parentElement;
        currentCodeCard.classList.toggle('bg-gray-800', isDarkMode);
        currentCodeCard.classList.toggle('bg-white', !isDarkMode);
        currentCodeCard.classList.toggle('border-gray-700', isDarkMode);
        currentCodeCard.classList.toggle('border-gray-200', !isDarkMode);
        currentCodeName.classList.toggle('text-gray-300', isDarkMode);
        currentCodeName.classList.toggle('text-gray-600', !isDarkMode);
        currentCodePreview.classList.toggle('text-gray-400', isDarkMode);
        currentCodePreview.classList.toggle('text-gray-500', !isDarkMode);
        
        const rightButtons = document.querySelectorAll('.fixed.right-4 button');
        rightButtons.forEach(btn => {
          btn.classList.toggle('border-gray-700', isDarkMode);
          btn.classList.toggle('border-gray-300', !isDarkMode);
          btn.classList.toggle('hover:bg-gray-800', isDarkMode);
          btn.classList.toggle('hover:bg-gray-100', !isDarkMode);
          btn.classList.toggle('bg-gray-800', isDarkMode && btn.classList.contains('active'));
        });
        
        const footer = document.querySelector('footer');
        footer.classList.toggle('bg-gray-800', isDarkMode);
        footer.classList.toggle('bg-white', !isDarkMode);
        footer.classList.toggle('border-gray-700', isDarkMode);
        footer.classList.toggle('border-gray-200', !isDarkMode);
        
        previewFrame.classList.toggle('bg-gray-900', isDarkMode);
        previewFrame.classList.toggle('bg-white', !isDarkMode);
      }

      function changePhoneModel(button) {
        phoneOptions.forEach(btn => {
          btn.classList.remove('active', 'bg-primary', 'text-white', 'border-primary');
          btn.classList.add('border-gray-300');
          if (isDarkMode) {
            btn.classList.add('border-gray-700');
          }
        });
        
        button.classList.add('active', 'bg-primary', 'text-white', 'border-primary');
        button.classList.remove('border-gray-300', 'border-gray-700');
        
        const width = button.getAttribute('data-width');
        const height = button.getAttribute('data-height');
        phoneFrame.style.width = `${width}px`;
        phoneFrame.style.height = `${height}px`;
        
        showNotification(`已切换为${button.textContent}尺寸`);
      }

      function copyCodeHtml() {
        if (!selectedCode) {
          showNotification('请先选择一个模版', false);
          return;
        }
        
        try {
          let codeHtml = selectedCode.codeHtml;
          
          navigator.clipboard.writeText(codeHtml).then(() => {
            showNotification('已复制模版HTML内容');
          }).catch(err => {
            console.error('复制失败:', err);
            const textarea = document.createElement('textarea');
            textarea.value = codeHtml;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            showNotification('已复制模版HTML内容');
          });
        } catch (err) {
          console.error('复制过程出错:', err);
          showNotification('复制失败，请重试', false);
        }
      }

      renderCodeList();
      codeSearchInput.addEventListener('input', (e) => renderCodeList(e.target.value));
      themeToggle.addEventListener('click', toggleTheme);
      phoneOptions.forEach(option => option.addEventListener('click', () => changePhoneModel(option)));
      copyStylesBtn.addEventListener('click', copyCodeHtml);

      if (preStoredCodes.length > 0) {
        selectCode(preStoredCodes[0]);
      }
    });
  </script>
</body>
</html>